<ion-header>
    <ion-navbar color="orange">
        <ion-title>
            任务大厅
        </ion-title>
        <ion-buttons end *ngIf="searchBarStatus">
            <button ion-button icon-only (click)="pageRedirect('MemberPage')">
                <ion-icon name="contact"></ion-icon>
            </button>
        </ion-buttons>
        <ion-buttons end *ngIf="!searchBarStatus">
            <button ion-button (click)="hideSearch()">
                取消
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>


<ion-content>
    <div *ngIf="searchBarStatus">
        <!-- banner开始 -->
        <div class="ht-100 ht-overflow s-banner" *ngIf="banners && banners.length">
            <ion-slides class="text-slide" [autoplay]="3000" [loop]="true">
                <ion-slide *ngFor="let banner of banners" (click)="url.jumpUrl(banner.link)">
                    <img [src]="util.parseImageUrl(banner.picture)" alt="">
                </ion-slide>
            </ion-slides>
        </div>
        <!-- banner结束 -->
        <!-- 公告开始 -->
        <div padding-horizontal class="marquee flex" *ngIf="notices && notices.length">
            <span class="marquee-icon">
                <ion-icon ios="ios-volume-up" md="md-volume-up"></ion-icon>
            </span>
            <ion-slides class="text-slide" [autoplay]="3000" [loop]="true" direction="vertical">
                <ion-slide *ngFor="let notice of notices" (click)="url.jumpUrl(notice.link)">
                    <p text-left>{{notice.ad_name}}</p>
                </ion-slide>
            </ion-slides>
        </div>
        <!-- 公告结束 -->
    </div>
    <!-- 搜索栏开始 -->
    <!--默认展示的搜索框-->
    <div>
        <div class="s-search ht-relative flex flex-align-center" *ngIf="searchBarStatus" (click)="showSelect('time')">
            <div class="ht-100 ht-overflow ht-background ht-line-25 ht-radius-30 flex">
                <div class="ht-float-left ht-height ht-overflow" style="width:40px;text-align:center;color:#999;">
                    <i class="fa fa-search"></i>
                </div>
                <div class="">
                    <input type="search" placeholder="请输入关键字" style="width: 100%;border:none; " [value]="defaultSearchData['keyword']['value']">
                </div>
            </div>
        </div>
        <div class="select-group flex">
            <div class="flex-1 ht-text-center padding-5 segment flex flex-align-center flex-line-center" (click)="showSelect('time')">
                <span>{{defaultSearchData['time']['text']}}</span>
                <i class="fas fa-caret-down margin-left-5"></i>
            </div>
            <div class="flex-1 ht-text-center padding-5-5 segment flex flex-align-center flex-line-center" (click)="showSelect('reward_status')">
                <span>{{defaultSearchData['reward_status']['text']}}</span>
                <i class="fas fa-caret-down margin-left-5"></i>
            </div>
            <div class="flex-1 ht-text-center padding-5 segment flex flex-align-center flex-line-center" (click)="showSelect('type')">
                <span>{{defaultSearchData['type']['text']}}</span>
                <i class="fas fa-caret-down margin-left-5"></i>
            </div>
            <div class="flex-1 ht-text-center padding-5 segment flex flex-align-center flex-line-center" (click)="showSelect('reward_sort')">
                <span>{{defaultSearchData['reward_sort']['text']}}</span>
                <i class="fas fa-caret-down margin-left-5"></i>
            </div>
        </div>
    </div>
    <!--点击搜索框以后展示的搜索选项-->
    <div *ngIf="!searchBarStatus" class="search-box">
        <div class="s-search ht-relative flex flex-align-center">
            <div class="ht-100 ht-overflow ht-background ht-line-25 ht-radius-30 flex">
                <div class="ht-float-left ht-height ht-overflow" style="width:40px;text-align:center;color:#999;">
                    <i class="fa fa-search"></i>
                </div>
                <div class="">
                    <input type="search" placeholder="请输入关键字" [(ngModel)]="defaultSearchData['keyword']['value']" style="width: 100%;border:none; ">
                </div>
            </div>
            <div style="width:60px;text-align:center;color:#000;" (click)="selected('keyword', defaultSearchData['keyword']['value'], defaultSearchData['keyword']['value'])">
                搜索
            </div>
        </div>
        <div class="search-select ht-relative">
            <div class="select-group flex">
                <div class="flex-1 ht-text-center padding-5 segment flex flex-align-center flex-line-center" (click)="showSelect('time')"
                    [ngClass]="{'text-orange': searchTypeStatus['time']}">
                    <span>{{defaultSearchData['time']['text']}}</span>
                    <span>
                        <i class="fas fa-caret-down margin-left-5" *ngIf="!searchTypeStatus['time']"></i>
                        <i class="fas fa-caret-up margin-left-5" *ngIf="searchTypeStatus['time']"></i>
                    </span>
                </div>
                <div class="flex-1 ht-text-center padding-5 segment flex flex-align-center flex-line-center" (click)="showSelect('reward_status')"
                    [ngClass]="{'text-orange': searchTypeStatus['reward_status']}">
                    <span>{{defaultSearchData['reward_status']['text']}}</span>
                    <span>
                        <i class="fas fa-caret-down margin-left-5" *ngIf="!searchTypeStatus['reward_status']"></i>
                        <i class="fas fa-caret-up margin-left-5" *ngIf="searchTypeStatus['reward_status']"></i>
                    </span>
                </div>
                <div class="flex-1 ht-text-center padding-5 segment flex flex-align-center flex-line-center" (click)="showSelect('type')"
                    [ngClass]="{'text-orange': searchTypeStatus['type']}">
                    <span>{{defaultSearchData['type']['text']}}</span>
                    <span>
                        <i class="fas fa-caret-down margin-left-5" *ngIf="!searchTypeStatus['type']"></i>
                        <i class="fas fa-caret-up margin-left-5" *ngIf="searchTypeStatus['type']"></i>
                    </span>
                </div>
                <div class="flex-1 ht-text-center padding-5 segment flex flex-align-center flex-line-center" (click)="showSelect('reward_sort')"
                    [ngClass]="{'text-orange': searchTypeStatus['reward_sort']}">
                    <span>{{defaultSearchData['reward_sort']['text']}}</span>
                    <span>
                        <i class="fas fa-caret-down margin-left-5" *ngIf="!searchTypeStatus['reward_sort']"></i>
                        <i class="fas fa-caret-up margin-left-5" *ngIf="searchTypeStatus['reward_sort']"></i>
                    </span>
                </div>
            </div>
            <div class="select-box">
                <div class="select-time" *ngIf="searchTypeStatus['time']" [ngClass]="{'slideInUp': searchTypeStatus['time'], 'slideOutDown': !searchTypeStatus['time']}">
                    <ul class="flex flex-wrap">
                        <li *ngFor="let value of fitter['time']; let i = index" (click)="selected('time', i, value)" [ngClass]="{'text-orange': defaultSearchData['time']['value'] == i}">
                            {{value}}
                        </li>
                    </ul>
                </div>
                <div class="select-status" *ngIf="searchTypeStatus['reward_status']" [ngClass]="{'slideInUp': searchTypeStatus['reward_status'], 'slideOutDown': !searchTypeStatus['reward_status']}">
                    <ul class="flex flex-wrap">
                        <li *ngFor="let value of fitter['reward_status']; let i = index" (click)="selected('reward_status', i, value)" [ngClass]="{'text-orange': defaultSearchData['reward_status']['value'] == i}">
                            {{value}}
                        </li>
                    </ul>
                </div>
                <div class="select-type" *ngIf="searchTypeStatus['type']" [ngClass]="{'slideInUp': searchTypeStatus['type'], 'slideOutDown': !searchTypeStatus['type']}">
                    <ul class="flex flex-wrap">
                        <li (click)="selected('type', 0, '全部')" [ngClass]="{'text-orange': defaultSearchData['type']['value'] == 0}">
                            全部
                        </li>
                        <li class="flex" *ngFor="let value of fitter['type'];" (click)="selected('type', value['type_id'], value['type_name'])" [ngClass]="{'text-orange': defaultSearchData['type']['value'] == value['type_id']}">
                            {{value['type_name']}}
                        </li>
                    </ul>
                </div>
                <div class="select-money" *ngIf="searchTypeStatus['reward_sort']" [ngClass]="{'slideInUp': searchTypeStatus['reward_sort'], 'slideOutDown': !searchTypeStatus['reward_sort']}">
                    <ul class="flex flex-wrap">
                        <li *ngFor="let value of fitter['reward_sort']; let i = index" (click)="selected('reward_sort', i, value)" [ngClass]="{'text-orange': defaultSearchData['reward_sort']['value'] == i}">
                            {{value}}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 搜索栏结束 -->
    <!-- 主内容开始 -->
    <div class="ht-f1f1f1 ht-overflow" *ngIf="lists && lists.length" [style.margin-top]="searchBarStatus ? '0': '77px'">
        <!-- 多任务 -->
        <div class=" ht-margin-bottom ht-background" padding-top padding-bottom (click)="pageRedirect('TasksDetailPage',{'id':task.id,'status':'0'})"  *ngFor="let task of tasks">
            <div padding-left padding-right>
                <div class="ht-overflow ht-padding-bottom10">
                    <img src="assets/imgs/share-holder1.jpg" alt="" class="t-tx">
                    <div class="ht-padding-lr ht-line-40 ht-float-left ht-d32d25 ht-font-14">
                        {{task.title}}
                    </div>
                    <div class="ht-padding-lr ht-line-40 ht-float-right ht-999 ht-font-14">
                        {{task.create_time}}
                    </div>
                </div>
                <div class="flex flex-line-between" padding-left>
                    <div class="ht-80">{{task.content}}</div>
                    <span class="t-zt">{{task.status_name}}</span>
                </div>
                <div class="flex flex-line-between" padding-top>

                    <span class="ht-font-f29603 padding-5 ht-radius-10 ht-font-12 ht-bg">
                       任务数量:{{task.num}} 个 | 剩余任务:{{task.remain_num}} 个
                    </span>
                    <div class="ht-font-12 ht-ff4b3d t-sj ht-bg">
                        <img src="assets/imgs/icon-sj.png" alt="" class="icon-sj">
                        <span class="ht-float-left ht-padding-l5">赏金 ￥{{task.fee}}/个</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 1 -->
        <div class="ht-overflow ht-margin-bottom ht-background" padding-top *ngFor="let info of lists" (click)="pageRedirect('PostDetailPage',{'id':info.amoy_id})">
            <div padding-left padding-right>
                <!-- 头像信息 -->
                <div class="ht-overflow ht-padding-bottom10">
                    <img [src]="util.parseImageUrl(info.head_img)" alt="" class="t-tx">
                    <div class="ht-padding-lr ht-line-30 ht-float-left ht-d32d25 ht-font-14 sub-nickname">
                        {{info.nickname}}
                    </div>
                    <div class="ht-padding-lr ht-line-30 ht-float-right ht-999 ht-font-14">
                        {{info.add_time}}
                    </div>
                </div>
                <!-- 信息编码信息 -->
                <!--<div class="ht-padding-bottom10  ht-overflow flex flex-line-between">-->
                <!--&lt;!&ndash;<span class="ht-inline-block ht-float-left ht-font-12 ht-999">&ndash;&gt;-->
                <!--&lt;!&ndash;任务编码：{{info.amoy_sn}}&ndash;&gt;-->
                <!--&lt;!&ndash;</span>&ndash;&gt;-->

                <!--</div>-->
                <div class="flex flex-line-between">
                    <!--<div class="ht-font-f29603">-->
                    <!--信用值：{{info.credit_line}}-->
                    <!--</div>-->
                    <!--<span class="ht-infloat-block ht-float-left ht-font-14 ht-333 ht-padding-lr" *ngIf="info.click_pay === 1">-->
                    <!--有偿分享任务-->
                    <!--</span>-->
                    <span class="ht-infloat-block ht-float-left ht-font-14 ht-333 ht-padding-lr" *ngIf="info.reward === 1">
                        {{info.type_name}}悬赏任务
                    </span>
                    <div class="t-sj ht-font-12 ht-ff4b3d">
                        <img src="assets/imgs/icon-sj.png" alt="" class="icon-sj">
                        <span class="ht-float-left ht-padding-l5">赏金 ￥{{info.reward_price}}</span>
                    </div>
                </div>
            </div>
            <!-- 信用值信息 -->
            <div padding-left padding-right class="ht-padding-tb ht-overflow ht-999">
                <span class="flex flex-line-between ht-padding-bottom10">
                    <span>报名截至：
                        <i class="ht-font-f29603">{{info.reward_end_time}}</i>
                    </span>
                    <i class="t-zt">
                        <span *ngIf="info.mission_status === 0">报名中</span>
                        <span *ngIf="info.mission_status === 1">任务中</span>
                        <span *ngIf="info.mission_status === 2">已完成</span>
                    </i>
                </span>
                <span class="flex flex-line-between">
                    <span>
                        <i class="ht-font-f29603 ht-padding-l5">{{info.reward_num}}人</i>报名</span>
                    <span>
                        <i class="ht-font-f29603 ht-padding-l5">{{info.see_num}}人</i>查看过</span>
                </span>
            </div>
        </div>
        <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
            <ion-infinite-scroll-content></ion-infinite-scroll-content>
        </ion-infinite-scroll>
    </div>
    <!-- 主内容结束 -->

    <!--发布按钮-->
    <div style="position:fixed;right:5px;bottom:45px;width:50px;height:50px;border-radius:50%;background:#f29700;border:1px solid #fff;box-shadow: #ccc 1px 1px;"
        (click)="pageRedirect('InformationStylePage')">
        <span style="font-size:50px;color:#fff;display:block;text-align:center;line-height:50px;">+</span>
    </div>
</ion-content>
